<template>
    <div class="fullScreen">
        <video id='vdo' poster='https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1516874998976&di=097200de670dd806e9a9016251be2eab&imgtype=jpg&src=http%3A%2F%2Fimg2.imgtn.bdimg.com%2Fit%2Fu%3D1291397622%2C1318481737%26fm%3D214%26gp%3D0.jpg'
            @timeupdate='(!timeDrage) && playTime()'
            @loadedmetadata='getallTime'>
            <source :src="url" type='video/mp4'>
            您的浏览器不支持 video 标签。
        </video>
        <div class='controls' @click.stop='stopControl'>
            <img class='playImg' @click='play' :src="playImg" width='17' alt="">
            <div class='progress'>
                <div class='range'></div>
                <input type='range' min='0' step='0.1' :max= 'maxVal' :value='rangeVal' class='rangeInput' 
                @touchstart='playRange($event)' />
            </div>
            <div class='time'>
                {{vdotime.currentTime}} / {{vdotime.allTime}}
            </div>
            <img @click='exitfullScreen' src="../../image/exit_screen.png" width='17' alt="">
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                url: '',
                playImg: require("../../image/play.png"),
                vdotime: {
                    currentTime: '',
                    allTime: '',
                },
                timeDrage: false,  //拖拽状态
                rangeVal: 0,  //input进度条初始值
                maxVal: '', //input进度条最大
                isShow: false,  //点击的是否是自定义控件 防止冒泡
            }
        },
        mounted() {
            this.$nextTick(function () {
                // console.log($('.fullScreen').height());
                $('.controls').width($('.fullScreen').height() - 20);
            })
        },
        methods: {
            //获取上个页面传来参数
            init() {
                const url = this.$route.query.url;
                if(url) {
                    this.url = url;
                }
            },
            //play
            play() {
                const vdoDom = document.getElementById('vdo');
                if(vdoDom.paused) {
                    vdoDom.play();
                    this.playImg = require("../../image/pause.png");
                }else {
                    vdoDom.pause();
                    this.playImg = require("../../image/play.png");
                } 
            },
            //控制视频控件显示隐藏
            controlShow() {
                this.isShow = false;
                $('.controls').slideToggle();
            },
            stopControl() {
                this.isShow = true;
            },
            
            exitfullScreen2() {
                const vdoDom = document.getElementById('vdo');
                const params = {
                    url: vdoDom.currentSrc,
                    currentTime: vdoDom.currentTime,
                    ispaused: vdoDom.paused
                };
                // console.log(params);
                //为了退出全屏后仍保存进度
                localStorage.setItem("fullScreen", JSON.stringify(params));
            },
            //gofullScreen
            exitfullScreen() {
                const vdoDom = document.getElementById('vdo');
                const params = {
                    url: vdoDom.currentSrc,
                    currentTime: vdoDom.currentTime,
                    ispaused: vdoDom.paused
                };
                // console.log(params);
                //为了退出全屏后仍保存进度
                localStorage.setItem("fullScreen", JSON.stringify(params));
                this.$router.back();
            },
            //监测视频播放进度
            playTime(){
                const vdoDom = document.getElementById('vdo');    
                this.vdotime.currentTime = this.$utils.vdoTime(vdoDom.currentTime);
                var currentPos = vdoDom.currentTime; //Get currenttime
                var maxduration = vdoDom.duration; //Get video duration
                var percentage = 100 * currentPos / maxduration; //in %
                $('.range').css('width',  percentage+'%');
                this.rangeVal = currentPos;
            },
            //拖拽进度条
            playRange(e) {
                this.timeDrage = true;
                const vdoDom = document.getElementById('vdo');
                var that = this;
                $(e.target).on('touchend',function(){
                    vdoDom.currentTime = $(e.target).val();  
                    that.vdotime.currentTime = that.$utils.vdoTime(vdoDom.currentTime); 
                    that.timeDrage = false;
                });
                
            },
            //获取总时长
            getallTime() {
                const vdoDom = document.getElementById('vdo');
                
                const url = this.$route.query.url;
                const currentTime = this.$route.query.currentTime;
                const ispaused = this.$route.query.ispaused;
                // console.log(url);
                if(url) {
                    vdoDom.currentTime = currentTime;
                    if(!ispaused) {
                        vdoDom.play();
                        this.playImg = require("../../image/pause.png");
                    } else {
                        vdoDom.pause();
                        this.playImg = require("../../image/play.png");
                    }
                }

                this.vdotime.currentTime = this.$utils.vdoTime(vdoDom.currentTime);
                this.vdotime.allTime = this.$utils.vdoTime(vdoDom.duration);
                this.maxVal = vdoDom.duration;
                
            },
        },
        created() {
            this.init();
        },
         //离开路由触发
        beforeRouteLeave(to,from,next){//
            this.exitfullScreen2();
            next();
        },
    }
</script>
<style lang="scss" scoped>
    .fullScreen {
        width: 100%;
        height: 100%;
        position: relative;
        background: #000;
        video {
            margin: auto;
            width: 100%;
            height: 100%;
            transform:rotate(90deg);
            -ms-transform:rotate(90deg); /* Internet Explorer */
            -moz-transform:rotate(90deg); /* Firefox */
            -webkit-transform:rotate(90deg); /* Safari 和 Chrome */
            -o-transform:rotate(90deg); /* Opera */
            object-fit: none;
        }
        .controls {
            display: flex;
            width: 100%;
            position: fixed;
            left: 0;
            top: 0;
            height: 40px;
            background: #000;
            opacity: .8;
            padding: 0 10px;
            transform:rotate(90deg);
            -ms-transform:rotate(90deg); /* Internet Explorer */
            -moz-transform:rotate(90deg); /* Firefox */
            -webkit-transform:rotate(90deg); /* Safari 和 Chrome */
            -o-transform:rotate(90deg); /* Opera */
            transform-origin: 20px 20px;
            -ms-transform-origin: 20px 20px; 		/* IE 9 */
            -webkit-transform-origin: 20px 20px;	/* Safari 和 Chrome */
            -moz-transform-origin: 20px 20px;		/* Firefox */
            -o-transform-origin: left center;		/* Opera */
            img {
                margin: auto 0;
            }
            .progress {
                flex: 1;
                display: flex;
                height: 10px;
                margin: auto 10px;
                position: relative;
                
                .range {
                    position: absolute;
                    left: 0;
                    top: 50%;
                    transform: translateY(-50%);
                    width: 0;
                    height: 1px;
                    background-color: hsl(217, 100%, 50%);
                    
                }
                input[type="range"] {
                    background-color: #fff;
                    border-radius: 15px;
                    -webkit-appearance: none;
                    height: 1px;
                    margin: auto;
                    
                }
                input[type="range"]::-webkit-slider-thumb {
                    -webkit-appearance: none;
                    cursor: default;   
                    top: -5px;
                    height: 12px;
                    width: 12px;
                    background: hsl(217, 100%, 50%);
                    border-radius: 50%;
                }
                .rangeInput {
                    width: 100%;   
                }
                
                
            }
            .time {
                color: #fff;
                margin: auto 10px auto 0;
                font-size: 12px;

            }

        }
    }
</style>